<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <link rel="stylesheet" href="../../css/wxq.css">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../font/css/font-awesome.min.css">
</head>
<body>

    <!--头部公共样式-->
    <header class="header">
        <div class = "logo float_left"><a href="../index/index.html">后台管理系统</a></div>
        <div class = "header_right">
            <nav>
                <ul>
                    <li>
                        <a title="更多"><i class = "fa fa-navicon"></i></a>
                        <ul class="dropdown_menu">
                            <li id = "logout">&nbsp;<i class = "fa fa-sign-out"></i>&nbsp;退出</li>
                        </ul>
                    </li>
                    <li>
                        <a href="../message/messages.html" title = "消息"><i class = "fa fa-envelope"></i></a>
                        <span class="message_count"></span>
                    </li>
                </ul>
            </nav>
            <div class = "message_warp_info"></div>
        </div>
    </header>

    <div class="container">

        <!--左边导航区-->
        <div class="slide" id ="slide">

            <!--左边管理员信息区域-->
            <div class = "admin_info">
                <a href="#" class = "admin_header_img">
                    <img src="../../images/test_header.png" alt="">
                    <div class = "upload_header_img">更换</div>
                </a>
                <div class = "admin_detail">
                    <span class = "admin_type">超级管理员</span>
                    <span class = "admin_name">王小强</span>
                </div>
            </div>

            <!--左边导航按钮区域-->
            <ul class = "menu" >
                <li>
                    <a href="../index/index.html" class="super_menu">
                        <i class="fa fa-home"></i>&nbsp;&nbsp;首页
                    </a>
                </li>
                <li>
                    <a class="super_menu">
                        <i class="fa fa-gears"></i>&nbsp;&nbsp;系统配置<i class="fa fa-angle-right"></i>
                    </a>
                    <ul class = "menu_child_list" >
                        <li>
                            <a href="../conf/bannerSetting.html">
                                <i class="fa fa-image"></i>&nbsp;&nbsp;banner管理
                            </a>
                        </li>
                    </ul>
                </li>

                <li>
                    <a class="super_menu active">
                        <i class="fa fa-users"></i>&nbsp;&nbsp;用户管理<i class="fa fa-angle-right"></i>
                    </a>
                    <ul class = "menu_child_list isSuper" style="display: block">
                        <li>
                            <a href="userList.html">
                                <i class="fa fa-user"></i>&nbsp;&nbsp;用户列表
                            </a>
                        </li>
                        <li>
                            <a href="../member/memberManagement.html">
                                <i class="fa fa-user-plus"></i>&nbsp;&nbsp;会员管理
                            </a>
                        </li>
                        <li>
                            <a href="../member/integralSetting.html">
                                <i class="fa fa-vcard"></i>&nbsp;&nbsp;积分设置
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a class="super_menu">
                        <i class="fa fa-cart-plus"></i>&nbsp;&nbsp;商城管理<i class="fa fa-angle-right"></i>
                    </a>
                    <ul class = "menu_child_list isSuper">
                        <li>
                            <a href="../category/goodsCategory.html">
                                <i class="fa fa-bar-chart"></i>&nbsp;&nbsp;商品分类
                            </a>
                        </li>
                        <li>
                            <a href="../freight/freightTemplate.html">
                                <i class="fa fa-cart-arrow-down"></i>&nbsp;&nbsp;运费模板
                            </a>
                        </li>
                        <li>
                            <a href="../goods/goodsList.html">
                                <i class="fa fa-list"></i>&nbsp;&nbsp;商品列表
                            </a>
                        </li>
                        <li>
                            <a href="../order/orderList.html">
                                <i class="fa fa-first-order"></i>&nbsp;&nbsp;订单管理
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="../message/messages.html" class="super_menu">
                        <i class="fa fa-comment"></i>&nbsp;&nbsp;消息管理
                    </a>
                </li>
                <li>
                    <a href="../index/dataStatistics.html" class="super_menu">
                        <i class="fa fa-signal"></i>&nbsp;&nbsp;数据统计
                    </a>
                </li>
                <li>
                    <a href="../admin/authoritySetting.html" class="super_menu">
                        <i class="fa fa-unlock"></i>&nbsp;&nbsp;权限管理
                    </a>
                </li>
            </ul>
        </div>

        <div class="main_content">

            <div class="warp">
                <div class = "position">
                    <span>当前位置：</span>
                    <span>
                        <a>用户管理/</a>
                        <a href="userList.html">用户列表</a>
                    </span>
                </div>
            </div>

            <div class="warp" id = "user_list">
                <table class="table table_border_bottom">
                    <thead>
                    <tr>
                        <th>id</th>
                        <th>昵称</th>
                        <th>头像</th>
                        <th>电话</th>
                        <th>性别</th>
                        <th>邮箱</th>
                        <th>国家</th>
                        <th>省份</th>
                        <th>市</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in resources.list">
                        <td v-text="item.id"></td>
                        <td v-text="item.nickName"></td>
                        <td ><img :src="item.avatarUrl" width="32" height="32" alt=""></td>
                        <td v-text="item.phone"></td>
                        <td v-if="item.gender == 1" v-text="'男'"></td>
                        <td v-else v-text = "'女'"></td>
                        <td v-text="item.email"></td>
                        <td v-text="item.country"></td>
                        <td v-text="item.province"></td>
                        <td v-text="item.city"></td>

                    </tr>
                    </tbody>
                </table>
                <div class = "pagination">
                    <a v-text="'共'+resources.total+'条数据'"></a>
                    <input type="number" min="1" style="width: 64px" placeholder="跳转到" id="page_val"/>
                    <a @click="first_page" class = "first_page">首页</a>
                    <a @click="pre_page" class = "pre"><i class = "fa fa-angle-left"></i></a>
                    <a>
                        <span class = "current_page" v-text="resources.currentPage"></span>
                        <span>/</span>
                        <span class = "total_page" v-text="resources.totalPage"></span>
                    </a>
                    <a @click="next_page" class = "next"><i class = "fa fa-angle-right"></i></a>
                    <a @click="last_page" class = "last_page">尾页</a>
                </div>
            </div>
        </div>
    </div>
    <script src = "../../js/jquery-3.2.1.min.js"></script>
    <script src="../../my_js/sockjs.min.js"></script>
    <script src="../../my_js/stomp.min.js"></script>
    <script src = "../../my_js/common.js"></script>
    <script src = "../../js/wxq.js"></script>
    <script src = "../../js/vue.min.js"></script>
    <script type="text/javascript">

        let app = new Vue({
            el:"#user_list",
            data: {
                resources:[]
            },
            mounted:function () {
                this.first_page();
                document.querySelector("#page_val").onkeydown = (event)=>{
                    let e = event || window.event || arguments.callee.caller.arguments[0];
                    if(e && e.keyCode===13){ // enter 键
                        let inpVal = document.querySelector("#page_val").value;
                        this.getUserList(inpVal,pageSize)
                    }
                };
            },
            methods: {
                first_page: function () {
                    this.getUserList(1,pageSize)
                },
                last_page:function () {
                    if(this.resources.currentPage < this.resources.totalPage){
                        this.getUserList(this.resources.currentPage,pageSize)
                    }
                },
                pre_page:function () {
                    if(this.resources.currentPage > 1){
                        this.getUserList(this.resources.currentPage,pageSize)
                    }
                },
                next_page:function () {
                    if(this.resources.currentPage < this.resources.totalPage){
                        this.getUserList(this.resources.currentPage,pageSize)
                    }
                },
                getUserList:function (currentPage,pageSize) {
                    $.get(rootPath+"/user",{currentPage:currentPage,pageSize:pageSize}, (res)=> {
                        if(res.meta.code === 200){
                            this.resources = res.data
                        }else {
                            this.resources = [];
                            alert("请求失败--"+res.meta.message)
                        }
                    })
                }
            }

        })
    </script>

</body>
</html>